require("../../assets/css/basic.css");
require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("./mine_sport_data.less");
//引入模块
const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");
import * as echarts from "echarts";
document.addEventListener("DOMContentLoaded", async function () {
	//1.回到上一页
	dom.get(".goback").addEventListener("click", function () {
		history.back();
	});

	// 2.渲染头像
	let res1 = await axios.get("/api/user/info");
	let res = await axios.get("/api/exercise");
	let data = res1.data.data;
	dom.get(".avator").src = axios.defaults.baseURL + data.imgUrl;

	//3.获取运动数据
	let calorie = res.data.data.sum7Calorie;
	let duration = res.data.data.sum7Duration;
	let meter = res.data.data.sum7Meter;
	let days = res.data.data.days.length;
	dom.get(".duration").textContent = duration;
	dom.get(".calorie").textContent = calorie;
	dom.get(".meter").textContent = meter;
	dom.get(".total-days").textContent = days;
	dom.get(".con-days").textContent = days;
	let daily = res.data.data.days;
	let result1 = daily.map(function (v) {
		return v.sumDuration;
	});
	let result2 = daily.map(function (v) {
		return v.date;
	});
	let result3 = result2.map(function (v) {
		return v.slice(5);
	});

	//4.绘制图表
	// 绘制图表1
	var myChart1 = echarts.init(dom.get(".chart1"));
	myChart1.setOption({
		title: {
			text: "近7天运动时长",
			top: 15,
			left: 15,
		},
		grid: {
			left: 50,
			height: 100,
		},
		xAxis: {
			type: "category",
			data: result3,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: result1,
				type: "bar",
				showBackground: true,
				backgroundStyle: {
					color: "rgba(180, 180, 180, 0.2)",
				},
			},
		],
		color: ["#83a7d1"],
	});
	// 绘制图表2
	let data1 = 0;
	let data2 = 0;
	let data3 = 0;
	daily.forEach(function (v) {
		data1 += v.exerciseData[0].duration;
		data2 += v.exerciseData[1].duration;
		data3 += v.exerciseData[2].duration;
	});
	var myChart2 = echarts.init(dom.get(".chart2"));
	myChart2.setOption({
		title: {
			text: "运动分类",
			top: 15,
			left: 15,
		},
		tooltip: {
			trigger: "item",
		},
		//注意图例的使用
		legend: {
			orient: "vertical",
			//基线以左侧为准左对齐
			left: "20",
			top: "center",
		},
		series: [
			{
				name: "运动时长",
				type: "pie",
				radius: "80%",
				data: [
					{ value: data1, name: "跑步" },
					{ value: data2, name: "骑行" },
					{ value: data3, name: "训练" },
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
				label: {
					position: "inside",
					formatter: "{d}%",
					color: "#fff",
				},
				color: ["#58bb92", "#736171", "#ee5c43"],
			},
		],
	});
	let data1Arr = daily.map(function (v) {
		return v.exerciseData[0].calorie;
	});
	let data2Arr = daily.map(function (v) {
		return v.exerciseData[1].calorie;
	});
	let data3Arr = daily.map(function (v) {
		return v.exerciseData[2].calorie;
	});
	//绘制图表3
	var myChart3 = echarts.init(dom.get(".chart3"));
	myChart3.setOption({
		title: {
			text: "近7日运动分类",
			top: 15,
			left: 15,
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				// Use axis to trigger tooltip
				type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
			},
		},
		legend: {
			// orient: "vertical",
			//基线以左侧为准左对齐
			right: 0,
			top: "30",
		},
		grid: {
			left: "2%",
			// right: "4%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: {
			type: "value",
		},
		yAxis: {
			type: "category",
			data: result3,
		},

		series: [
			{
				name: "跑步",
				type: "bar",
				stack: "total",
				// label: {
				// 	show: true,
				// },
				emphasis: {
					focus: "series",
				},
				data: data1Arr,
				color: ["#558ed5"],
			},
			{
				name: "骑行",
				type: "bar",
				stack: "total",
				// label: {
				// 	show: true,
				// },
				emphasis: {
					focus: "series",
				},
				data: data2Arr,
				color: ["#93cddd"],
			},
			{
				name: "训练",
				type: "bar",
				stack: "total",
				// label: {
				// 	show: true,
				// },
				emphasis: {
					focus: "series",
				},
				data: data3Arr,
				color: ["#92d050"],
			},
		],
	});
	//绘制图表4
	let data4Arr = daily.map(function (v) {
		return v.count;
	});
	var myChart4 = echarts.init(dom.get(".chart4"));
	myChart4.setOption({
		title: {
			text: "近7日训练次数",
			top: 15,
			left: 15,
		},
		grid: {
			height: 100,
		},
		xAxis: {
			type: "category",
			data: result3,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: data4Arr,
				type: "line",
			},
		],
		color: ["#7bc2b4"],
	});
});
